import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import Imgcaptcha from './ImgCaptcha/ImgCaptcha';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import TopContainer from './TopContainer/TopContainer';
import BottomContainer from './BottomContainer/BottomContainer';
import { LoginContext, useLogin } from './LoginContext';

export interface IProps extends ICompProps {}
Login.defaultProps = {} as Partial<IProps>;
function Login(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('Login', className);
    const {
        loginForm,
        setloginForm,
        isAgreeAgreement,
        setIsAgreeAgreement,
        imgCaptcha,
        setImgCaptcha,
        isShowImgCaptchaModal,
        openImgCaptcha,
        closeImgCaptcha,
    } = useLogin();
    return (
        <LoginContext.Provider
            value={{
                loginForm,
                setloginForm,
                isAgreeAgreement,
                setIsAgreeAgreement,
                imgCaptcha,
                setImgCaptcha,
                isShowImgCaptchaModal,
                openImgCaptcha,
                closeImgCaptcha,
            }}>
            <RootView className={localClassName} style={style}>
                <RootPageComponent leftTitle="登录">
                    <TopContainer></TopContainer>
                    <BottomContainer></BottomContainer>
                    <Imgcaptcha isShowImgCaptchaModal={isShowImgCaptchaModal} ></Imgcaptcha>
                </RootPageComponent>
            </RootView>
        </LoginContext.Provider>
    );
}
export default React.memo(Login as FC<IProps>);
const RootView = styled(View)`
    &.Login {
    }
`;
